<template>
  <div class="box">
    <div class="title">热招职位</div>
    <div class="list">
      <div class="card" v-for="(item, index) in postList.slice((page-1)*pageSize,pageSize*page)">
        <div class="top">
          <div class="title">{{ item.post_name }}</div>
          <div class="wages">{{ item.salary }}</div>
        </div>
        <div class="center">
          <div class="title">
            <span>{{ item.address }}</span>
            <span>{{ item.education }}</span>
          </div>
        </div>
        <div class="bottom">{{ item.trade_name }}</div>
      </div>
    </div>
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-size="pageSize" background layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getPostAPI } from '../../api/post'
export default {
  name: 'home',

  data() {
    return {
      postList: [],
      total: 1,
      pageSize:6,
      page: 1
    };
  },

  mounted() {

  },

  methods: {
    async initPostFn() {
      const res = await getPostAPI()
      console.log(res);
      if (res.status !== 200) {
       console.log('获取岗位数据失败!');
      } else {
        console.log('获取岗位数据成功!');
        this.postList = res.data.data
        this.total = res.data.total
      }
    },
    handleSizeChange(val){
      this.pageSize = 1
      this.pageSize = val
    },
    handleCurrentChange(val){
      this.page = val
    }
  },
  created() {
    this.initPostFn()
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 80%;
  // height:800px;
  display: flex;
  flex-direction: column;
  margin: 20px auto;

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .list {
    width: 100%;
    height: calc(100%-40px);
    display: flex;
    flex-wrap: wrap;

    .card {
      float: left;
      width: 30%;
      margin-bottom: 10px;
      height: 130px;
      display: flex;
      margin: 10px 15px;
      flex-direction: column;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;

      .top {
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: row;

        .title {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 15px;
          font-size: 0.825em;
        }

        .wages {
          width: 20%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: red;
          font-size: 0.825em;
        }
      }

      .center {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        // background-color: beige;

        .title {
          width: 80%;
          height: 100%;

          span {
            margin-left: 15px;
            font-size: 12px;
            padding: 3px;
            color: gray;
            border-radius: 5px;
            background-color: rgb(247, 248, 250);
          }
        }
      }

      .bottom {
        height: 40px;
        background-color: rgb(248, 250, 254);
        line-height: 40px;
        padding-left: 15px;
        color: gray;
        font-size: 0.825em;
      }
    }
  }

  .pagination {
    display: flex;
    margin: 10px;
    justify-content: center;
  }
}
</style>